<template>
	<view class="services-wap">
		<view class="">
			<u-navbar :is-back="true" :border-bottom="false" height="46" title="筛选" title-color="#333" :title-size="36"
			 :title-bold="true">
			</u-navbar>
			<view class="search" style="padding: 0 20rpx;">
				<u-search placeholder="搜索或输入关键字" height="64" @search="search" @custom="search" v-model="searchfull" :clearabled="true"
				 @clear="clear" :action-style="{'fontSize': '30rpx'}"></u-search>
			</view>
		</view>
		<u-gap height="2" bg-color="#E6E6E6" class="u-margin-top-20"></u-gap>
		<HMfilterDropdown :filterData="filterData" :defaultSelected="defaultSelected" @confirm="confirm" :updateMenuName="true"></HMfilterDropdown>
		<view class="service-box" v-for="(item,index) in serviceList" :key="index" @click="goCompanyPage(item)">
			<view class="" v-if="item.djcolid">
				<view class="service-wap">
					<view class="services-top-box">
						<view class="service-comsname">
							{{item.comsname.slice(0,4)}}
						</view>
						<view class="service-comname-box">
							<view class="service-comname">
								{{item.comname}}
							</view>
							<view class="service-gslx-box">
								<text>{{item.zzcolid}}</text>
							</view>
						</view>
						<view class="service-db" @click.stop="GoContrast(item.id,item.comname,item.comsname)">
							<u-icon name="plus" color="#c40200" size="24" style="margin-right: 5rpx;"></u-icon> 对比
						</view>
					</view>
					<view class="services-fr-box">
						<view class="service-cont">
							<view class="service-cont-warp">
								<view class="service-cont-text">
									法定代表人
								</view>
								<view class="">
									{{item.fddbr||"未知法人"}}
								</view>
							</view>

						</view>
						<view class="service-cont">
							<view class="service-cont-warp">
								<view class="service-cont-text">
									注册资本
								</view>
								<view class="">
									{{item.zczb||"未知"}}
								</view>
							</view>

						</view>
						<view class="service-cont">
							<view class="service-cont-warp">
								<view class="service-cont-text">
									成立日期
								</view>
								<view class="">
									{{ $u.timeFormat(item.clrq, 'yyyy年mm月dd日')||"未知"}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="service-comdz">
					<u-icon name="map" color="#c40200" size="36" style="margin-right: 10rpx;"></u-icon>{{item.comdz}}
				</view>
				<u-gap height="20" bg-color="#F7F7F7"></u-gap>
			</view>
		</view>
		<u-loadmore status="没有更多数据" style="padding-top: 30rpx;" v-if="loadshow" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import HMfilterDropdown from "@/components/common/HM-filterDropdown.vue"
	import poent from "@/common/poent.js"
	export default {
		data() {
			return {
				serviceList: {},
				defaultSelected: [],
				selectedList: [],
				comtypedata:[],
				comdq: "",
				comtype: "",
				zzcolid: "",
				pagesize: 8,
				filterData: [{
						"name": '地区',
						"type": 'radio',
						"iconName": "ditu_dingwei",
						"iconSize": 30,
						"submenu": [{
							'name': "地区",
							'submenu': []
						}]
					},
					{
						"name": '资质',
						"type": 'hierarchy-column',
						"iconName": "rongyu",
						"iconSize": 30,
						"submenu": []
					},
					{
						"name": '类别',
						"type": 'radio',
						"iconName": "shaixuan1",
						"iconSize": 30,
						"submenu": [{
							'name': "类别",
							'submenu': []
						}, ]
					},
				],
				searchfull: "",
				loadshow: false,
			}
		},
		async onLoad(options) {
			this.searchfull = options.name
			this.zzcolid = options.zzcolid
			await this.device()
			await this.deviceData()
		},
		onReachBottom() {
			if (this.pagesize <= this.serviceList.length) {
				this.pagesize = this.pagesize + 8
				this.deviceData()
			}
		},
		methods: {
			async deviceData() {
				let params = {
					cmd: 'zCompany_list_proc',
					para: {
						"pageindex": 1,
						"zzcolid": this.zzcolid,
						"comdq": this.comdq,
						"comtype": this.comtype,
						"pagesize": this.pagesize,
						"searchfull": this.searchfull
					}
				}
				const res = await this.$u.api.device(params)
				this.serviceList = res.Data.Data
				for (var value of this.serviceList.values()) {
					value.zzcolid = this.comtypedata.filter(item => item.id == value.zzcolid) != "" ? this.comtypedata.filter(item =>
						item.id == value.zzcolid)[0].name : "";
					if (value.zczb) {
						value.zczb = value.zczb + "万元"
					}
				}
				if (this.pagesize > this.serviceList.length) {
					this.loadshow = true
				}
			},
			async device() {
				let params = {
					cmd: 'zCompany_list_proc',
					para: {
						"pageindex": 1,
					}
				}

				let paramsc = {
					cmd: 'lCodeTwo_list',
					para: {
						"pageindex": 1,
						"pagesize": 7000,
					}
				}
				const res = await this.$u.api.device(params)
				this.serviceList = res.Data.Data
				this.comtypeList = res.Data.Datas2
				this.comtypedata=res.Data.Datas2
				this.comtypeList = this.comtypeList.filter(item => item.pid == 0)
				for (var value of this.comtypeList.values()) {
					value.submenu = res.Data.Datas2.filter(item => item.pid == value.id)
					for (var value of value.submenu.values()) {
						value.submenu = res.Data.Datas2.filter(item => item.pid == value.id)
					}
				}

				const resData = await this.$u.api.device(paramsc)
				this.selectedList = resData.Data.Data
				this.filterData[0].submenu[0].submenu = poent
				this.filterData[1].submenu = this.comtypeList
				this.filterData[1].submenu = JSON.parse(JSON.stringify(this.comtypeList).replace(/id/g, "value"))
				this.filterData[2].submenu[0].submenu = JSON.parse(JSON.stringify(this.selectedList).replace(/id/g, "value"))

				for (var value of this.serviceList.values()) {
					value.djcolid = this.selectedList.filter(item => item.id == value.djcolid) != "" ? this.selectedList.filter(item =>
						item.id == value.djcolid)[0].name : "";
				}
			},
			confirm(e) {
				this.pagesize = 8
				this.comdq = e.value[0][0][0] ? e.value[0][0][0] + "0000" : ""
				// this.zzcolid=e.value[1][e.value.length - 1] ? e.value[1][e.value.length - 1] : e.value[1][e.value.length - 2]
				if (e.value[1][e.value.length - 1]) {
					this.zzcolid = e.value[1][e.value.length - 1]
				} else if (e.value[1][e.value.length - 2]) {
					this.zzcolid = e.value[1][e.value.length - 2]
				} else if (e.value[1][e.value.length - 3]) {
					this.zzcolid = e.value[1][e.value.length - 3]
				}
				this.comtype = e.value[2][0][0] ? e.value[2][0][0] : ""
				this.deviceData()
			},
			search() {
				this.pagesize = 8
				this.zzcolid = ""
				this.comdq = ""
				this.comtype = ""
				this.deviceData(this.searchfull)
			},
			clear() {
				this.searchfull = ""
			},
			goCompanyPage(item) {
				this.$u.route('/pages/HomeLnner/company-page/company-page', {
					pageid: '3309',
					id: item.id
				});
			},
			async GoContrast(keid, keytitle, keyname) {
				if( this.$store.state.token){
					let params = {
						cmd: 'zCompanyCart_add_proc',
						ak: this.$store.state.token,
						para: {
							comid: keid,
							comsname: keytitle,
							comname: keyname,
							comlevel: '0',
						}
					}
					const res = await this.$u.api.device(params)
					console.log(res)
					this.$refs.uToast.show({
						title: res.Message,
					})
					this.ContrastList()
				}else{
					this.$u.route('/pages/myuser/user/UserInfo') 
				}
				
			},
			async ContrastList() {
				let params = {
					cmd: 'zCompanyCart_list_proc',
					ak: this.$store.state.token,
					para: {

					},
				}
				const res = await this.$u.api.device(params)
				// console.log(res)
				if(res.Data.Data.length==2){
					this.$u.route('/pages/service/contrast/contrast');
					
				}
			}
		},
		components: {
			'HMfilterDropdown': HMfilterDropdown
		}
	}
</script>

<style scoped lang="scss">
	.service-box {}

	.service-wap {
		border-bottom: 2rpx solid #EBEBEB;

		.services-top-box {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;

			.service-comsname {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				margin-right: 30rpx;
				width: 80rpx;
				height: 80rpx;
				font-size: 28rpx;
				line-height: 28rpx;
				background: url(../../../static/atlas/services.png) no-repeat;
				background-size: 100% 100%;
				color: #fff;
			}

			.service-comname-box {
				flex: 1;

				.service-comname {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					padding-right: 30rpx;
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.service-gslx-box {
					text {
						color: #0E79C0;
						background-color: #E1F3FF;
						padding: 2rpx 10rpx;
						border-radius: 5rpx;
						font-size: 28rpx;
					}
				}
			}

			.service-db {
				border: 2rpx solid #c40200;
				border-radius: 10rpx;
				color: #c40200;
				padding: 5rpx 10rpx;
				height: 45rpx;
				font-size: 24rpx;
			}
		}

		.services-fr-box {
			padding: 20rpx;
			display: flex;
			font-size: 24rpx;
			text-align: center;

			.service-cont {
				display: flex;
				align-items: center;
				width: 33.3%;

				&:nth-child(2) {
					&::after {
						content: "";
						display: inline-block;
						width: 2rpx;
						height: 40rpx;
						background-color: #E6E6E6;
					}

					&::before {
						content: "";
						display: inline-block;
						width: 2rpx;
						height: 40rpx;
						background-color: #E6E6E6;
					}
				}

				.service-cont-warp {
					width: 100%;
				}

				.service-cont-text {
					margin-bottom: 20rpx;
					color: #999999;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}
		}
	}

	.service-gslx {
		padding: 20rpx;
	}

	.service-comdz {
		padding: 20rpx;
		color: #999999;
	}
</style>
